<template>
    <div class="louver-container">
        <ul class="louver-content" :style="{ width: contentWidth }">
            <li class="louver-item" v-for="(item, i) in list" :style="{ '--l': list.length }">
                <img class="louver-img" :src="item.img">
                <div class="louver-flag">{{ item.desc }}</div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "Louver",
    props: ["louverList"],
    data() {
        return {
            list: [
                {
                    img: "/img/style/lake.jpg",
                    desc: "Lake"
                },
                {
                    img: "/img/style/simiao.jpg",
                    desc: "Temple"
                },
                {
                    img: "/img/style/waterfall.jpg",
                    desc: "Waterfall"
                },
                {
                    img: "/img/style/zhongta.jpg",
                    desc: "Zhongta"
                },
                {
                    img: "/img/style/lake.jpg",
                    desc: "Lake"
                },
                {
                    img: "/img/style/simiao.jpg",
                    desc: "Temple"
                },
                {
                    img: "/img/style/waterfall.jpg",
                    desc: "Waterfall"
                },
                {
                    img: "/img/style/zhongta.jpg",
                    desc: "Zhongta"
                },
            ],
        }
    },
    computed: {
        contentWidth: function(){
            return 161 * this.list.length + "px";
        }
    },
    methods: {
    },
    created() {
        if (this.$props.louverList) {
            this.list = this.$props.louverList;
        }
    },
    mounted() {
        
    }
}
</script>

<style>
@import url("@/assets/css/style/louver.css");
</style>